<extend name="Layout/ins_base" />
<block name="content">
<script>
    document.body.style = null;
</script>
<link href="__INS__/css/login.css" rel="stylesheet">

<div class="container">
    <div class="row" id="login-wrapper">
        <div class="col-md-4 col-md-offset-4" style="overflow: hidden; padding: 0">
            <div id="switch-way" class="row" style="width: 200%;position: relative; left: 0; transition: all .3s cubic-bezier(.17,.67,.76,1.32);">
                <div class="col-md-6">
                    <div class="row" style="padding: 15px">
                        <div id="logo-login">
                            <h1>{:get_system_config("SYSTEM_NAME")}
                                <span>v1.0</span>
                            </h1>
                        </div>
                        <div class="account-box">
                            <div class="row">
                                <div class="col-md-12 row-block">
                                    <h4 style="text-align:center" id="login-msg">还未扫码</h4>
                                    <div id="qrcode" style="width:250px;margin:auto;"></div>
                                </div>
                            </div>
                            <hr>
                            <center>
                                <span class="text-center login-with">打开手机 <b>微信</b> 点击 <b>发现</b> 使用 <b>扫一扫</span>
                            </center>
                            <div class="row-block">
                                <div class="row">
                                    <div class="col-md-12 row-block">
                                        <!-- <a href="#" class="btn btn-primary btn-block">刷新二维码</a> -->
                                        <button type="button" onclick="$('#switch-way').css('left', '-100%')" class="btn btn-success btn-block">账号密码登录</button>
                                    </div>
                                </div>
                                </div>
                            <div class="row-block">
                                <div class="row">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row" style="padding: 15px">
                        <div id="logo-login">
                            <h1>{:get_system_config("SYSTEM_NAME")}
                                <span>v1.0</span>
                            </h1>
                        </div>
                        <div class="account-box">
                            <form action="{:U('public/check_login')}" method="post">
                                <div class="form-group">
                                    <label class="control-label" for="emp_no">帐号：</label>
                                    <input class="form-control" id="emp_no" name="emp_no" />
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="password">密码：</label>
                                    <input class="form-control" id="password" type="password" name="password" />
                                </div>
                                <div class="checkbox  pull-left">
                                    <label>
                                        <input class="ace" type="checkbox" name="remember" value="1" /> 记住用户名
                                    </label>
                                </div>
                                <div>
                                    <button class="btn btn-primary pull-right" type="submit">
                                        登 录
                                    </button>
                                </div>
                            </form>
                            <div class="or-box">
                                <center><span class="text-center login-with">使用其他方式登录</span></center>
                            </div>

                            <div class="row-block">
                                <div class="row">
                                    <div class="col-md-12 row-block">
                                        <button type="button" onclick="$('#switch-way').css('left', '0')" class="btn btn-success btn-block">微信扫码登录</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</block>

<block name="js">
<script src="__INS__/js/qrcode.js"></script>
<script>
$(function () {
    $("#qrcode").qrcode({
        render: "canvas",
        width: 250,
        height: 250,
        text: '{$scanUrl}'
    });

    checkLogin = function (randomStr) {
        $.ajax({
            url: '{:U('public/login')}',
            type: 'GET',
            dataType: 'json',
            data: {randomStr: randomStr},
        })
        .done(function(result) {
            $('#login-msg').text(result.msg);

            if (result.code == 'ok') {
                clearInterval(timer);
                location.href = '{:U('user/index')}';
            }
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
    };

    timer = setInterval(function() {
        checkLogin('{$randomStr}');
    }, 3000);
});
</script>
</block>
